<template>
	<view>
		<text style="font-size: 30rpx; color: #868686; margin-left: 35rpx;">展示群聊</text>
        <view class="content_box">
        	<view class="box_item" v-for="item in group">
        		<image class="item_img" :src="item.imgurl" mode=""></image>
				<text class="text_item item_name">{{item.name}}</text>
				<text  class="text_item item_num">{{item.num}}人</text>
				<button class="item_but">取消公开</button>
        	</view>
        </view>
		<button class="but" @click="addGroup">创建群聊</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group: [{
					id: 1,
					name: '羊村宇宙小组',
					imgurl: require("@/static/img/logo.png"),
					num:9
				},
				{
					id: 2,
					name: '超人宇宙小组',
					imgurl: require("@/static/img/logo.png"),
					num:7
					
				}]
			}
		},
		methods: {
          addGroup(){
			  //调用数据库接口，添加对应的群聊
		  }
		}
	}
</script>

<style scoped>
	page {
		background-color: #f6f6f6;
	}
	.content_box{
		width: 100%;
		height: 1380rpx;
	}
	.text_item{
		display: block;
		color: black;
				
	}
	.item_name{
		display: block;
		color: black;
		margin-top: 39rpx;
		margin-left: -20rpx;
		font-size: 30rpx;
	}
	.item_num{
		color: #b0b0b0;
		margin-top: 88rpx;
		margin-left: -175rpx;
		font-size: 26rpx;
	}
	.item_img{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 35rpx 40rpx;
	}
	.box_item{
		width: 90%;
		height:150rpx;
		background-color: #ffffff;
		margin: 30rpx auto;
		border-radius: 25rpx;
		display: flex;
	}
	.item_but{
		background-color: transparent;
        width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 35rpx;
		border: 1rpx solid #d84462;
		font-size: 22rpx;
		margin-top: 50rpx;
		margin-left: 340rpx;
		color:#d84462 ;
		padding: 0;
	}
	.but{
		width: 80%;
		height: 70rpx;
		background-color: #ff2442;
		border-radius: 60rpx;
		color: white;
		line-height: 70rpx;
		font-size: 27rpx;
	}
</style>